<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <link rel="localizations" href="%SERVICE_ROOT%/loleaflet/%VERSION%/l10n/admin-localizations.json" type="application/vnd.oftn.l10n+json"/>

    <title>LibreOffice Online - Admin console</title>
    <script src="%SERVICE_ROOT%/loleaflet/%VERSION%/admin-bundle.js"></script>
    <link rel=StyleSheet href="%SERVICE_ROOT%/loleaflet/%VERSION%/admin/css/bulma.min.css" type="text/css" />

    <style>
        @font-face {
        font-family: "Montserrat";
            src: url("%SERVICE_ROOT%/loleaflet/%VERSION%/admin/font/Montserrat-Regular.ttf") format("truetype");
        }

        html, body {
            font-family: 'Montserrat', sans-serif;
		}

		/* These classes are for tab views without javascipt. */
        div:target.mtabs {
           display: block;
        }
        div.mtabs {
            display: none
		}

		/* These classes are for collapsable elements without javascript. */
		input[type=checkbox].mcollapsable + ul {
			display: block;
			visibility: hidden;
			height: 0;
			opacity: 0;
			transition-property: opacity, visibility;
			transition-duration: 500ms, 500ms;
		}
		input[type=checkbox].mcollapsable:checked + ul {
			visibility: visible;
			height: auto;
			opacity: 1;
			transition-property: opacity, visibility;
			transition-duration: 500ms, 500ms;
		}

    </style>
</head>
<body>
    <!--%BRANDING_JS%-->
    <script>
        if (typeof brandProductName !== 'undefined') {l10nstrings.strProductName = brandProductName}
        document.title = l10nstrings.strProductName + ' - ' + l10nstrings.strAdminConsole;
        var host = (window.location.protocol === 'https:' ? 'wss://': 'ws://') + window.location.host + '%SERVICE_ROOT%/lool/adminws/';
    </script>

    <div class="is-fullwidth has-text-white" style="height:62px;background-color:#17191E;line-height:50px;">
        <a style="margin-left:12px;color:#9D998D;"><script>document.write(l10nstrings.strProductName + ' - ' + l10nstrings.strAdminConsole)</script></a>
        <a style="margin-right:12px;color:#9D998D;" id="a-settings-tablet" href="adminSettings.html" class="is-hidden-mobile is-pulled-right"><script>document.write(l10nstrings.strSettings)</script></a>
        <div class="dropdown is-hoverable is-right is-pulled-right is-hidden-tablet" style="margin-right:12px;">
            <div class="dropdown-trigger">
                <button class="button has-text-white" aria-haspopup="true" aria-controls="dropdown-menu1" style="width:40px;background-color:#17191E;border:none;">
                <span>&#9776;</span>
                <span class="icon is-small">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
                </button>
            </div>
            <div class="dropdown-menu" id="dropdown-menu1" role="menu">
                <div class="dropdown-content">
                    <div class="dropdown-item">
                        <div class="list is-hoverable" style="height:100%;">
                            <a id="a-overwiew-mobile" class="list-item" href="admin.html"><script>document.write(l10nstrings.strOverview)</script></a>
                            <a id="a-analytics-mobile" class="list-item" href="adminAnalytics.html"><script>document.write(l10nstrings.strAnalytics)</script></a>
                            <a id="a-history-mobile" class="list-item" href="adminHistory.html"><script>document.write(l10nstrings.strHistory)</script></a>
                            <a id="a-log-mobile" class="list-item" href="adminLog.html"><script>document.write(l10nstrings.strLog)</script></a>
                            <a id="a-settings-mobile" class="list-item" href="adminSettings.html"><script>document.write(l10nstrings.strSettings)</script></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="columns is-fullwidth" style="height:calc(100vh - 70px);background-color: #F5F5F5;">
        <nav class="column is-hidden-mobile is-narrow" id="column-admin-panel" style="width:225px;">
            <div class="list is-hoverable" style="height:100%;">
                <a class="list-item" id="button-admin-panel-collapse" href="#">&larr;</a>
                <a id="a-overwiew-tablet" class="list-item" href="admin.html"><script>document.write(l10nstrings.strOverview)</script></a>
                <a id="a-analytics-tablet" class="list-item" href="adminAnalytics.html"><script>document.write(l10nstrings.strAnalytics)</script></a>
                <a id="a-history-tablet" class="list-item" href="adminHistory.html"><script>document.write(l10nstrings.strHistory)</script></a>
                <a id="a-log-tablet" class="list-item" href="adminLog.html"><script>document.write(l10nstrings.strLog)</script></a>
            </div>
        </nav>
        <div class="column is-narrow is-hidden-mobile" id="column-admin-panel-expand" style="width:70px;display:none;">
            <div class="list is-hoverable">
                <a class="list-item" id="button-admin-panel-expand" href="#">&rarr;</a>
            </div>
        </div>
        <div class="column">
            <!--%MAIN_CONTENT%-->
        </div>
    </div>

<script>
    window.addEventListener('load', function() {
        document.getElementById('button-admin-panel-expand').onclick = function() {
            document.getElementById('column-admin-panel').style.display = 'block';
            document.getElementById('column-admin-panel-expand').style.display = 'none';
        };

        document.getElementById('button-admin-panel-collapse').onclick = function() {
            document.getElementById('column-admin-panel').style.display = 'none';
            document.getElementById('column-admin-panel-expand').style.display = 'block';
        };
    });
</script>

    <!--%FOOTER%-->
</body>
</html>